<template>
    <div>
        <v-progress-linear v-if="loading" indeterminate></v-progress-linear>

        <v-container
            style="background-color: #ba2b39"
            class="white--text pa-4 pt-8"
        >
            <v-row align="center" class="px-4" v-if="uid > 0">
                <v-col class="d-inline-flex align-center">
                    <v-avatar style="border: 2px solid white" color="white">
                        <v-img src="/asset/h5/img/avatar.png"></v-img>
                    </v-avatar>
                    <div class="ml-2 subtitle-1">
                        <div
                            class="font-weight-medium d-inline-flex align-center mb-1"
                        >
                            {{ account.name }}
                            <span
                                v-if="account.kyc"
                                class="ml-4 d-flex align-center subtitle-2"
                            >
                                <v-icon color="white" small class="mr-1"
                                    >mdi-star-check-outline</v-icon
                                >已认证
                            </span>
                        </div>
                        <div class="subtitle-2 font-weight-medium">
                            已加入{{app_name}} {{ account.day }} 天
                        </div>
                    </div>
                </v-col>
                <v-col cols="auto" class="align-self-start px-0">
                    <v-btn link depressed icon :to="`/user/about`">
                        <v-icon color="white" class="mr-1"
                            >mdi-cog-outline</v-icon
                        >
                    </v-btn>
                </v-col>
            </v-row>
            <v-row align="center" class="px-4" v-else>
                <v-col>
                    <router-link
                        :to="`/login`"
                        style="border: 1px solid white"
                        class="white--text text-decoration-none subtitle-2 rounded-pill px-4 py-1"
                    >
                        点击登录
                    </router-link>
                </v-col>
                <v-col cols="auto" class="align-self-start px-0">
                    <v-btn link depressed icon :to="`/user/about`">
                        <v-icon color="white" class="mr-1"
                            >mdi-cog-outline</v-icon
                        >
                    </v-btn>
                </v-col>
            </v-row>
            <v-row align="center" justify="center" class="px-4 subtitle-1 pb-8">
                <v-col>
                    <router-link
                        :to="`/user/log/ticket`"
                        class="white--text text-decoration-none"
                    >
                        <span class="subtitle-2">金币余额:</span>
                        <span class="font-weight-medium ml-1">{{
                            account.ticket ? account.ticket : "-"
                        }}</span>
<!--                        <span class="text-caption">次</span>-->
                    </router-link>
                </v-col>
                <v-col>
                    <router-link
                        :to="`/user/log/money`"
                        class="white--text text-decoration-none"
                    >
                        <span class="subtitle-2">账户余额:</span>
                        <span class="font-weight-medium ml-1">{{
                            account.money ? account.money : "-"
                        }}</span>
                        <span class="text-caption">元</span>
                    </router-link>
                </v-col>
            </v-row>
        </v-container>

        <v-container class="mt-n10">
            <v-card elevation="0" class="rounded-lg">
                <v-row class="pa-4 grid-btn mt-0">
                    <v-col cols="4" class="d-inline-flex justify-center">
                        <v-btn
                            link
                            block
                            plain
                            :ripple="false"
                            :to="`/user/loan`"
                        >
                            <div class="mt-2">我的客户</div>
                            <div style="height: 24px; width: 24px">
                                <IconCustormer></IconCustormer>
                            </div>
                        </v-btn>
                    </v-col>
                    <v-col cols="4" class="d-inline-flex justify-center">
                        <v-btn
                            link
                            block
                            plain
                            :ripple="false"
                            :to="`/user/invite`"
                        >
                            <div class="mt-2">我的合伙人</div>
                            <div style="height: 24px; width: 24px">
                                <IconPartner></IconPartner>
                            </div>
                        </v-btn>
                    </v-col>
                    <v-col cols="4" class="d-inline-flex justify-center">
                        <v-btn
                            link
                            block
                            plain
                            :ripple="false"
                            :to="`/user/share`"
                        >
                            <div class="mt-2">我的邀请码</div>
                            <div style="height: 24px; width: 24px">
                                <IconInviteCode></IconInviteCode>
                            </div>
                        </v-btn>
                    </v-col>
                </v-row>
            </v-card>

            <v-card elevation="0" class="rounded-lg mt-8">
                <v-row class="pa-4 grid-btn mt-0">
                    <v-col cols="4" class="d-inline-flex justify-center mb-4">
                        <v-btn
                            link
                            block
                            plain
                            :ripple="false"
                            :to="`/user/kyc`"
                        >
                            <div class="mt-2">身份验证</div>
                            <v-icon>mdi-card-account-details-outline</v-icon>
                        </v-btn>
                    </v-col>
                    <v-col cols="4" class="d-inline-flex justify-center mb-4">
                        <v-btn
                            link
                            block
                            plain
                            :ripple="false"
                            :to="`/user/deposit`"
                        >
                            <div class="mt-2">帐号充值</div>
                            <div style="height: 24px; width: 24px">
                                <IconWithdraw></IconWithdraw>
                            </div>
                        </v-btn>
                    </v-col>
                    <v-col cols="4" class="d-inline-flex justify-center mb-4">
                        <v-btn
                            link
                            block
                            plain
                            :ripple="false"
                            :to="`/user/withdraw`"
                        >
                            <div class="mt-2">提现</div>
                            <div style="height: 24px; width: 24px">
                                <IconDeposit></IconDeposit>
                            </div>
                        </v-btn>
                    </v-col>
                    <v-col cols="4" class="d-inline-flex justify-center mb-4">
                        <v-btn
                            link
                            block
                            plain
                            :ripple="false"
                            :to="`/user/qa`"
                        >
                            <div class="mt-2">常见问题</div>
                            <v-icon>mdi-help-circle-outline</v-icon>
                        </v-btn>
                    </v-col>
                    <v-col cols="4" class="d-inline-flex justify-center">
                        <v-btn
                            link
                            block
                            plain
                            :ripple="false"
                            :to="`/user/log/ticket`"
                        >
                            <div class="mt-2">抢单流水</div>
                            <div style="height: 24px; width: 24px">
                                <IconHistory></IconHistory>
                            </div>
                        </v-btn>
                    </v-col>
                    <v-col cols="4" class="d-inline-flex justify-center">
                        <v-btn
                            link
                            block
                            plain
                            :ripple="false"
                            :to="`/user/log/money`"
                        >
                            <div class="mt-2">资金流水</div>
                            <div style="height: 24px; width: 24px">
                                <IconCard></IconCard>
                            </div>
                        </v-btn>
                    </v-col>
                    <v-col cols="4" class="d-inline-flex justify-center">
                        <v-btn
                            link
                            block
                            plain
                            :ripple="false"
                            :to="`/user/chat`"
                        >
                            <div class="mt-2">人工服务</div>
                            <div style="height: 24px; width: 24px">
                                <IconHelp></IconHelp>
                            </div>
                        </v-btn>
                    </v-col>
                </v-row>
            </v-card>
        </v-container>

        <v-btn
            class="mx-2"
            fab
            dark
            color="primary"
            :to="`/user/chat`"
            style="position: fixed; bottom: 100px; right: 16px;"
        >
            <div style="font-size: 80%">人工服务</div>
        </v-btn>
    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";
import IconCustormer from "../../icon/MyCustormer.vue";
import IconPartner from "../../icon/MyPartner.vue";
import IconInviteCode from "../../icon/MyInviteCode.vue";
import IconHelp from "../../icon/Help.vue";
import IconDeposit from "../../icon/Deposit.vue";
import IconWithdraw from "../../icon/Withdraw.vue";
import IconHistory from "../../icon/History.vue";
import IconCard from "../../icon/Card.vue";

export default {
    data: () => ({
        account: {},
        app_name: '',
        loading: false,
    }),
    components: {
        IconCustormer,
        IconPartner,
        IconInviteCode,
        IconHelp,
        IconDeposit,
        IconWithdraw,
        IconHistory,
        IconCard
    },
    computed: {
        ...mapGetters(["uid"]),
    },
    created() {
        this.loadAN();
        if (this.uid > 0) {
            this.load();
        }
    },
    methods: {
        loadAN() {
            axios.get(`/v1/home`).then((response) => {
                this.app_name = response.data.data.app_name;
            })
                .catch(function () {})
                .then(function () {});
        },
        load() {
            this.loading = true;
            const that = this;
            axios
                .get(`/v1/user/account`)
                .then((response) => {
                    if (response.data.code == 0) {
                        that.account = response.data.data;
                    } else {
                        that.$toasted.show(response.data.msg, {
                            type: "error",
                        });
                    }
                })
                .catch(function () {})
                .then(function () {
                    that.loading = false;
                });
        },
    },
};
</script>

<style lang="scss">
.grid-btn .v-btn .v-btn__content {
    flex-direction: column-reverse;
    height: inherit;
}
</style>
